<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style></style>
    <script src="../../dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- <h1>事件处理</h1> -->
      <p @click.stop.capture="onclick">普通事件</p>
      <!-- 自定义事件 -->
      <!-- <comp @myclick="onMyClick" value1="haha"></comp> -->
    </div>
  </body>
  <script>
    // Vue.component("comp", {
    //   template: `<div @click="onClick">this is comp</div>`,
    //   //props: ["value1"], // 统一格式化为{"value1": {"type": null}}
    //   props: {
    //     value1: {
    //       type: String,
    //       default: "haha",
    //       validator: function (value) {
    //         return ["haha", "warning", "danger"].indexOf(value) !== -1;
    //       },
    //     },
    //     value2: [Number, String],
    //   },
    //   /** 上面prop格式化为
    //      {
    //         "value1": {
    //             "default": "haha",
    //             "type":ƒ String(),
    //             validator: ƒ (value)
    //         },
    //         "value2": {
    //             "type": [ ƒ Number(), ƒ String()]
    //         }
    //     }
    //    * */
    //   methods: {
    //     onClick() {
    //       this.$emit("myclick");
    //     },
    //   },
    // });
    const app = new Vue({
      el: "#app",
      data() {
        return {
          a: 2,
        };
      },
      methods: {
        // onclick() {
        //   console.log("普通事件");
        // },
        onMyClick() {
          console.log("自定义事件");
        },
      },
    });
    console.log(app.$options.render);
  </script>
</html>
